<template>
  <view class="container">
    <scroll-view scroll-y="true" class="h-100">
      <view class="tap">
        <view class="avatar v-center" v-if="!token" @click="goLogin">
          <view class="center out">
            <view class="center nei">
              <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/avatar.png" mode="" class="img">
              </image>
            </view>
          </view>
          <view class="login-text">注册/登录</view>
        </view>
        <view class="tap-box" v-else>
          <view class="avatar-box space-between" @click="goPage('../edit/edit')">
            <view class="avatar v-center">
              <view class="center out">
                <view class="center nei">
                  <!-- <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/gj.png" class="gj"></image> -->
                  <image :src="userInfo.avatar" mode="" class="img"></image>
                </view>
              </view>
              <view class="login-text">
                <view class="name v-center">
                  <view class="name-text">{{ userInfo.name }}</view>
                  <image
                    v-if="userInfo.jobId == 2"
                    src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/md.png"
                    class="vip-img"
                  ></image>
                  <image
                    v-if="userInfo.jobId == 1"
                    src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/tzr.png"
                    class="vip-img"
                  ></image>
                  <image
                    v-if="userInfo.jobId == 3"
                    src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/yg.png"
                    class="vip-img"
                  ></image>
                </view>
                <view class="id">{{ userInfo.shopName }}</view>
              </view>
            </view>
            <view class="right">
              <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image>
            </view>
          </view>
          <view class="bank space-between">
            <view class="left">
              <view class="tit">待提现佣金（元）</view>
              <view class="text">{{ userInfo.price }}</view>
            </view>
            <view class="center right" @click="goPage('../withdraw/withdraw')">佣金提现</view>
          </view>
        </view>
      </view>
      <view class="hx space-between" v-if="token && userInfo.jobId == 1">
        <view class="hx-box" @click="scanCodeHandler">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/ewm.png" class="scan-img" mode=""></image>
          <view class="text">二维码核销</view>
        </view>
        <view class="line"></view>
        <view class="hx-box" @click="goPage('../number/number')">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/sz.png" class="scan-img" mode=""></image>
          <view class="text">数字码核销</view>
        </view>
      </view>
      <view class="my" :class="{ mt: userInfo.jobId != 1 }">
        <view class="title">常用功能</view>
        <view class="my-box space-between v-center">
          <view class="my-item center" @click="goPage('../code/code', true)">
            <image
              src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/wdtgm.png"
              mode=""
              class="my-img"
            ></image>
            <view class="text">我的推广码</view>
          </view>
          <view class="my-item center" @click="goPage('../promotion/promotion', true)">
            <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/tjjl.png" mode="" class="my-img"></image>
            <view class="text">推广记录</view>
          </view>
          <view class="my-item center" @click="goPage('../withdraw-records/withdraw-records', true)">
            <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/txjl.png" mode="" class="my-img"></image>
            <view class="text">提现记录</view>
          </view>
        </view>
      </view>
      <view class="t-box">
        <view class="space-between v-center t-item" @click="goPage('../bank/bank', true)">
          <view class="text">提现银行卡管理</view>
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image>
        </view>
        <view class="space-between v-center t-item" @click="wait">
          <view class="text">推广规则</view>
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image>
        </view>
        <view class="space-between v-center t-item" @click="goPage('../agreement/agreement')">
          <view class="text">协议与隐私政策</view>
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image>
        </view>
      </view>
    </scroll-view>

    <tabbar-vue></tabbar-vue>
  </view>
</template>

<script>
import { getUserInfo } from "../../api/active"
import tabbarVue from "../../components/tabbar.vue"
export default {
  components: {
    tabbarVue
  },
  data() {
    return {
      token: uni.getStorageSync("token") || "",
      userInfo: ""
    }
  },
  onShow() {
    this.getInfo()
  },
  onPullDownRefresh() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      if (this.token) {
        getUserInfo({
          userId: uni.getStorageSync("userId")
        })
          .then(res => {
            this.userInfo = res.data
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    },
    async scanCodeHandler() {
      await this.isLogin()
      uni.scanCode({
        onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
        scanType: ["qrCode"], // 扫码类型，这里设置为二维码
        success: function (res) {
          console.log(`扫码结果：${JSON.stringify(res)}`)
          // 处理扫码结果
          if (res.result) {
            uni.navigateTo({
              url: `/pages/write-off/write-off?code=${res.result}&type=1`
            })
          }
        },
        fail: function (err) {
          console.log(`错误：${err}`)
        },
        complete: function () {
          console.log("扫码完成")
        }
      })
    },
    wait() {
      uni.showToast({
        icon: "none",
        title: "敬请期待"
      })
    },
    async isLogin() {
      return new Promise((resolve, reject) => {
        if (!this.token) {
          return uni.showModal({
            title: "暂未登录",
            content: "是否现在去登录",
            success: res => {
              if (res.confirm) {
                this.goLogin()
              } else if (res.cancel) {
                console.log("用户点击取消")
              }
            }
          })
        } else {
          return resolve()
        }
      })
    },
    goLogin() {
      uni.navigateTo({
        url: "../login/login"
      })
    },
    async goPage(url, needLogin) {
      await this.isLogin()
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hx {
  width: 702rpx;
  height: 200rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin: 103rpx auto 0 auto;
  align-items: center;
  padding: 0 110rpx;

  .hx-box {
    text-align: center;
  }

  .scan-img {
    width: 60rpx;
    height: 60rpx;
  }

  .text {
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    margin-top: 20rpx;
  }

  .line {
    width: 2rpx;
    height: 107rpx;
    background: #e8e8e8;
  }
}

.bank {
  padding: 0 45rpx 0 35rpx;
  border-top: 2rpx dashed #dddddd;
  align-items: center;
  margin-top: 40rpx;
  height: 120rpx;

  .tit {
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
  }

  .text {
    font-weight: bold;
    font-size: 50rpx;
    color: #333333;
  }

  .right {
    width: 171rpx;
    height: 62rpx;
    background: #005097;
    border-radius: 31rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: 500;
  }
}

.vip-img {
  width: 165rpx;
  height: 44rpx;
  margin-left: 10rpx;
  margin-top: 4rpx;
}

.container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  padding-bottom: 150rpx;
}

.tap {
  width: 100vw;
  height: 414rpx;
  // background: linear-gradient(0deg, #164fa0, #4377c1);
  background: url("https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/index-bg.png") no-repeat;
  background-size: cover;
  padding-top: 177rpx;
  padding-left: 24rpx;

  .tap-box {
    width: 702rpx;
    height: 316rpx;
    background: #ffffff;
    border-radius: 15rpx;
    padding-top: 37rpx;
  }
}

.out {
  width: 118rpx;
  height: 118rpx;
  background: rgba(245, 245, 245, 0.1);
  border-radius: 50%;

  .nei {
    width: 107rpx;
    height: 107rpx;
    background: rgba(245, 245, 245, 0.3);
    border-radius: 50%;
    position: relative;

    .gj {
      width: 52rpx;
      height: 43rpx;
      position: absolute;
      top: -12rpx;
      left: -2rpx;
    }

    .img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
    }
  }
}

.login-text {
  font-weight: 800;
  font-size: 36rpx;
  color: #ffffff;
  margin-left: 26rpx;
}

.avatar-box {
  padding-right: 30rpx;
  align-items: center;
  padding-left: 36rpx;

  .name {
  }

  .name-text {
    font-weight: 800;
    font-size: 36rpx;
    color: #333333;
    max-width: 200rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .id {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    margin-top: 4rpx;
  }
}

.vip-box {
  width: 702rpx;
  height: 160rpx;
  position: relative;
  // background: linear-gradient(90deg, #CDE4F6 0%, #5BA3E6 100%);
  border-radius: 15rpx;
  margin: -80rpx auto 0 auto;

  .no-login {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    padding: 0 36rpx;
    width: 100%;
    height: 100%;
  }

  .wdl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .we {
    .text {
      font-weight: 800;
      font-size: 34rpx;
      color: #033e8b;
      background: linear-gradient(-90deg, #ffe1b1 0%, #d9a472 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .text1 {
      font-weight: 500;
      font-size: 28rpx;
      color: #fddeae;
      margin-top: 4rpx;
    }
  }

  .buy {
    width: 171rpx;
    height: 62rpx;
    background: linear-gradient(87deg, #fedfb3, #fbbe8a);
    border-radius: 31rpx;
    font-size: 28rpx;
    color: #481e0f;
    font-weight: 800;
  }
}

.my {
  width: 702rpx;
  height: 276rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin: 20rpx auto 0 auto;
  &.mt {
    margin-top: 100rpx;
  }
  .title {
    font-weight: 800;
    font-size: 28rpx;
    color: #333333;
    padding: 26rpx 0 0 24rpx;
  }

  .my-box {
    margin-top: 40rpx;
    padding: 0 50rpx;

    .my-item {
      flex-direction: column;

      .my-img {
        width: 84rpx;
        height: 84rpx;
      }

      .text {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-top: 20rpx;
      }
    }
  }
}

.t-box {
  width: 702rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin: 23rpx auto 0 auto;
  padding: 0 25rpx;

  .t-item {
    width: 100%;
    border-bottom: 2rpx solid #e9e9e9;
    height: 100rpx;

    .text {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .t-item:last-child {
    border: none;
  }
}

.jt {
  width: 13rpx;
  height: 23rpx;
}
</style>
